<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/gllery.css" />
  </head>
  <body>
    <div id="gallery" class="gallery">
      <audio id="simpleLoveRef" autoplay loop>
        <source src="../assets/audio/love-story.mp3" type="audio/mpeg" />
      </audio>
      <input type="checkbox" />
      <img
        src="https://picsum.photos/id/1028/300/300"
        alt="a forest after an apocalypse"
      />
      <img
        src="https://picsum.photos/id/15/300/300"
        alt="a waterfall and many rocks"
      />
      <img
        src="https://picsum.photos/id/1040/300/300"
        alt="a house on a mountain"
      />
      <img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers" />
      <img
        src="https://picsum.photos/id/136/300/300"
        alt="big rocks with some trees"
      />
      <img
        src="https://picsum.photos/id/1039/300/300"
        alt="a waterfall, a lot of tree and a great view from the sky"
      />
      <img src="https://picsum.photos/id/110/300/300" alt="a cool landscape" />
      <img
        src="https://picsum.photos/id/1047/300/300"
        alt="inside a town between two big buildings"
      />
      <img
        src="https://picsum.photos/id/1057/300/300"
        alt="a great view of the sea above the mountain"
      />
    </div>
    <script>
      window.onload = function () {
        const gallery = document.querySelector("#gallery");
        gallery.addEventListener("click", (e) => {
          e.stopPropagation();
          const simpleLoveRef = document.querySelector("#simpleLoveRef");
          simpleLoveRef.play();
        });
      };
    </script>
  </body>
</html>
